<template>
  <!-- 对话框配置项: 关闭时销毁, 可拖拽, 居中-->
  <el-dialog
    v-model="dialogs.event.check"
    title="待审核的交通事件"
    destroy-on-close
    draggable
    center
    width="80%"
  >
    <br />
    <template v-if="gridData.length == 0">
      <el-empty :image-size="200" description="暂时没有待审核的交通事件!" />
    </template>
    <!-- 表格 -->
    <el-table :data="gridData" v-else>
      <el-table-column
        fixed="left"
        property="number"
        label="事件编号"
        width="150"
      />
      <el-table-column property="type" label="事件类型" width="150" />
      <el-table-column property="addr" label="发生地点" width="150" />
      <el-table-column property="datetime" label="发生时间" width="180" />
      <el-table-column property="describe" label="事件描述" width="300" />
      <el-table-column property="userTureName" label="事件报告人" width="150" />
      <el-table-column property="userPhone" label="联系方式" width="150" />
      <el-table-column property="car" label="事件车辆" width="150" />
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button
            type="primary"
            round
            @click.prevent="handleCheck(scope.$index)"
            >审核</el-button
          >
          <el-button
            type="warning"
            round
            @click.prevent="handleDelete(scope.$index)"
            >忽略</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <br />
    <br />
    <br />
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 8, 10]"
      :small="false"
      :disabled="false"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import eventApi from '@/apis/event.js' //导入封装好的API
import { useDialogsStore } from '@/stores/dialogs' // 使用pinia
import { useEventStore } from '@/stores/event' // 使用pinia
const { dialogs } = useDialogsStore()
const { event } = useEventStore()

const gridData = ref([])
const currentPage = ref(1)
const pageSize = ref(5)
const pageTotal = ref(0)

// 获取待审核的事件并渲染到表格
const getEventsUnchecked = async (pages, num) => {
  gridData.value = []
  const res = await eventApi.getEventAllUnchecked(pages, num)
  pageTotal.value = res.result.total
  res.result.data.forEach((item) => {
    gridData.value.push({
      number: item.event_number,
      type: item.event_type,
      level: item.event_level,
      datetime: item.event_datetime,
      addr: item.event_addr,
      car: item.event_car,
      userTureName: item.user_truname,
      status: item.event_status,
      userPhone: item.user_phone,
      describe: item.event_describe,
      location: item.event_location,
      id: item.event_id
    })
  })
}

// 点击审核事件
const handleCheck = (index) => {
  dialogs.event.check = false
  dialogs.event.checking = true
  event.checking = gridData.value[index]
}

// 忽略事件
const handleDelete = async (index) => {
  let delId = gridData.value[index].id
  const res = await eventApi.delEventById(delId)
  if (res.code) {
    getEventsUnchecked(currentPage.value, pageSize.value)
    ElMessage({
      message: '事件已被忽略!',
      type: 'error'
    })
  }
}

const handleSizeChange = (val) => {
  getEventsUnchecked(currentPage.value, val)
}
const handleCurrentChange = (val) => {
  getEventsUnchecked(val, pageSize.value)
}
onMounted(() => {
  getEventsUnchecked(1, 5)
})
</script>
<style scoped></style>
